<template>
  <div>
    <el-card shadow="never" style="margin-bottom: 20px;">
      <el-badge :value="apply_count" class="item">
        <el-button @click="submitData(10)">待审核</el-button>
      </el-badge>
      <!--      <el-badge :value="over_count" class="item">-->
      <!--        <el-button @click="submitData(2)">已授信项目</el-button>-->
      <!--      </el-badge>-->
      <el-badge :value="all_count" class="item" type="primary">
        <el-button @click="submitData(1)">项目总数</el-button>
      </el-badge>
    </el-card>
    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="授信状态">
          <el-select v-model="searchInfo.nowStatus" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />

          </el-select></el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="searchInfo.proName" placeholder="搜索条件" />
        </el-form-item>
        <el-form-item label="施工单位">
          <el-input v-model="searchInfo.conUnit" placeholder="搜索条件" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rt">重置</el-button>
        </el-form-item>

        <!--                <el-form-item>-->
        <!--                    <el-button @click="openDialog" type="primary">新增userProject表</el-button>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item>-->
        <!--                    <el-popover placement="top" v-model="deleteVisible" width="160">-->
        <!--                        <p>确定要删除吗？</p>-->
        <!--                        <div style="text-align: right; margin: 0">-->
        <!--                            <el-button @click="deleteVisible = false" size="mini" type="text">取消</el-button>-->
        <!--                            <el-button @click="onDelete" size="mini" type="primary">确定</el-button>-->
        <!--                        </div>-->
        <!--                        <el-button icon="el-icon-delete" size="mini" slot="reference" type="danger">批量删除</el-button>-->
        <!--                    </el-popover>-->
        <!--                </el-form-item>-->
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />

      <!--            <el-table-column label="施工企业授权委托书" prop="authClientBook" width="120"></el-table-column>-->

      <!--            <el-table-column label="开户行" prop="bankAddress" width="120"></el-table-column>-->

      <!--            <el-table-column label="项目结算账户名" prop="bankName" width="120"></el-table-column>-->

      <!--            <el-table-column label="项目结算账号" prop="bankNumber" width="120"></el-table-column>-->

      <!--            <el-table-column label="中标通知书" prop="bidFile" width="120"></el-table-column>-->

      <!--            <el-table-column label="中标合同" prop="bidOntract" width="120"></el-table-column>-->

      <!--            <el-table-column label="项目经理，技术负责人和施工负责人签字样式确认及承诺书" prop="commitment" width="120"></el-table-column>-->

      <!--            <el-table-column label="施工许可证" prop="conCer" width="120"></el-table-column>-->

      <!--            <el-table-column label="信用报告" prop="creditReport" width="120"></el-table-column>-->

      <!--            <el-table-column label="控股股东或实控连带担保承诺函" prop="holderCommitLetter" width="120"></el-table-column>-->

      <el-table-column label="项目名称" prop="proName" width="120" />
      <el-table-column label="施工单位" prop="conUnit" width="120" />
      <el-table-column label="发包单位" prop="outUnit" width="120" />
      <el-table-column label="项目总金额（元）" prop="allPrice" width="120">
        <template slot-scope="scope">
          {{ scope.row.allPrice | money }}
        </template>
      </el-table-column>
      <el-table-column label="申请授信金额（元）" prop="applyPrice" width="120">
        <template slot-scope="scope">
          {{ scope.row.applyPrice | money }}
        </template>
      </el-table-column>
      <el-table-column label="最后更新时间" width="180">
        <template slot-scope="scope">{{ scope.row.UpdatedAt|formatDate }}</template>
      </el-table-column>

      <el-table-column label="当前状态" width="120">
        <template slot-scope="scope">
          <div v-for="item in options" v-if="item.value == scope.row.nowStatus">
            {{ item.label }}
          </div>
        </template>
      </el-table-column>

      <!--            <el-table-column label="项目唯一指定结算账户确认书及承诺书" prop="payCommitLetter" width="120"></el-table-column>-->

      <!--            <el-table-column label="规划许可证" prop="planCer" width="120"></el-table-column>-->

      <!--            <el-table-column label="项目地点" prop="proAddress" width="120"></el-table-column>-->

      <!--            <el-table-column label="项目工期" prop="proTime" width="120"></el-table-column>-->

      <!--            <el-table-column label="安全生成许可证" prop="saveCer" width="120"></el-table-column>-->

      <!--            <el-table-column label="投标文件" prop="tenderFile" width="120"></el-table-column>-->

      <!--            <el-table-column label="会员ID" prop="userId" width="120"></el-table-column>-->

      <el-table-column label="按钮组">
        <template slot-scope="scope">
          <el-button
            class="table-button"
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="userProjectDetail(scope.row)"
          >详情
          </el-button>
          <!--                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)">删除-->
          <!--                    </el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="page"
      :page-size="pageSize"
      :page-sizes="[10, 30, 50, 100]"
      :style="{float:'right',padding:'20px'}"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="弹窗操作">
      <el-form :model="formData" label-position="right" label-width="80px">
        <el-form-item label="项目总金额（万）:">
          <el-input-number v-model="formData.allPrice" :precision="2" clearable />
        </el-form-item>

        <el-form-item label="申请授信金额:">
          <el-input-number v-model="formData.applyPrice" :precision="2" clearable />
        </el-form-item>

        <el-form-item label="施工企业授权委托书:">
          <el-input v-model="formData.authClientBook" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="开户行:">
          <el-input v-model="formData.bankAddress" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="项目结算账户名:">
          <el-input v-model="formData.bankName" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="项目结算账号:">
          <el-input v-model="formData.bankNumber" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="中标通知书:">
          <el-input v-model="formData.bidFile" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="中标合同:">
          <el-input v-model="formData.bidOntract" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="项目经理，技术负责人和施工负责人签字样式确认及承诺书:">
          <el-input v-model="formData.commitment" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="施工许可证:">
          <el-input v-model="formData.conCer" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="施工单位:">
          <el-input v-model="formData.conUnit" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="信用报告:">
          <el-input v-model="formData.creditReport" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="控股股东或实控连带担保承诺函:">
          <el-input v-model="formData.holderCommitLetter" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="当前状态，0为申请:">
          <el-input v-model.number="formData.nowStatus" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="发包单位:">
          <el-input v-model="formData.outUnit" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="项目唯一指定结算账户确认书及承诺书:">
          <el-input v-model="formData.payCommitLetter" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="规划许可证:">
          <el-input v-model="formData.planCer" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="项目地点:">
          <el-input v-model="formData.proAddress" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="项目名称:">
          <el-input v-model="formData.proName" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="项目工期:">
          <el-input v-model="formData.proTime" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="安全生成许可证:">
          <el-input v-model="formData.saveCer" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="投标文件:">
          <el-input v-model="formData.tenderFile" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="会员ID:">
          <el-input v-model.number="formData.userId" clearable placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="enterDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createUserProject,
  deleteUserProject,
  deleteUserProjectByIds,
  updateUserProject,
  findUserProject,
  getUserProjectList
} from '@/api/userProject' //  此处请自行替换地址
import { formatTimeToStr } from '@/utils/date'
import infoList from '@/mixins/infoList'

export default {
  name: 'UserProject',
  filters: {
    formatDate: function(time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
    formatBoolean: function(bool) {
      if (bool != null) {
        return bool ? '是' : '否'
      } else {
        return ''
      }
    }
  },
  mixins: [infoList],
  data() {
    return {
      // 0待审核，1待授信，2授信中，3还款中，4已延迟，5冻结中，6完成'
      options: [{
        value: 10,
        label: '待审核'
      }, {
        value: 1,
        label: '待授信'
      }, {
        value: 2,
        label: '授信中'
      }, {
        value: 8,
        label: '律师审核中'
      }, {
        value: 3,
        label: '还款中'
      }, {
        value: 7,
        label: '已逾期'
      }, {
        value: 4,
        label: '已延迟'
      }, {
        value: 5,
        label: '冻结中'
      }, {
        value: 6,
        label: '已完成'
      }
      ],
      listApi: getUserProjectList,
      dialogFormVisible: false,
      type: '',
      deleteVisible: false,
      multipleSelection: [], formData: {
        allPrice: 0,
        applyPrice: 0,
        authClientBook: '',
        bankAddress: '',
        bankName: '',
        bankNumber: '',
        bidFile: '',
        bidOntract: '',
        commitment: '',
        conCer: '',
        conUnit: '',
        creditReport: '',
        holderCommitLetter: '',
        nowStatus: 0,
        outUnit: '',
        payCommitLetter: '',
        planCer: '',
        proAddress: '',
        proName: '',
        proTime: '',
        saveCer: '',
        tenderFile: '',
        userId: 0

      }
    }
  },
  async created() {
    await this.getTableData()
  },
  methods: {
    rt() {
      this.searchInfo = {}
      this.getTableData()
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getTableData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUserProject(row)
      })
    },
    async onDelete() {
      const ids = []
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据'
        })
        return
      }
      this.multipleSelection &&
        this.multipleSelection.map(item => {
          ids.push(item.ID)
        })
      const res = await deleteUserProjectByIds({ ids })
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        if (this.tableData.length == ids.length && this.page > 1) {
          this.page--
        }
        this.deleteVisible = false
        this.getTableData()
      }
    },
    async updateUserProject(row) {
      const res = await findUserProject({ ID: row.ID })
      this.type = 'update'
      if (res.code == 0) {
        this.formData = res.data.reuserProject
        this.dialogFormVisible = true
      }
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.formData = {
        allPrice: 0,
        applyPrice: 0,
        authClientBook: '',
        bankAddress: '',
        bankName: '',
        bankNumber: '',
        bidFile: '',
        bidOntract: '',
        commitment: '',
        conCer: '',
        conUnit: '',
        creditReport: '',
        holderCommitLetter: '',
        nowStatus: 0,
        outUnit: '',
        payCommitLetter: '',
        planCer: '',
        proAddress: '',
        proName: '',
        proTime: '',
        saveCer: '',
        tenderFile: '',
        userId: 0

      }
    },
    async deleteUserProject(row) {
      const res = await deleteUserProject({ ID: row.ID })
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        if (this.tableData.length == 1 && this.page > 1) {
          this.page--
        }
        this.getTableData()
      }
    },
    async enterDialog() {
      let res
      switch (this.type) {
        case 'create':
          res = await createUserProject(this.formData)
          break
        case 'update':
          res = await updateUserProject(this.formData)
          break
        default:
          res = await createUserProject(this.formData)
          break
      }
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '创建/更改成功'
        })
        this.closeDialog()
        this.getTableData()
      }
    },
    async submitData(type) {
      if (type !== 1) {
        this.searchInfo.nowStatus = type
      } else {
        this.searchInfo.nowStatus = undefined
      }
      await this.getTableData()
    },
    openDialog() {
      this.type = 'create'
      this.dialogFormVisible = true
    },
    userProjectDetail(row) {
      this.$router.push({
        name: 'user_project_detail',
        query: { 'id': row.ID }
      })
    }
  }
}
</script>

<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
